<template>
	<div class="follow">
		<!-- 头部 -->
		<Myheader
			title="我的跟帖"
			:show="true"
			@right="
				$router.push({
					name: 'index',
					query: {
						id: $route.query.id,
					},
				})
			"
		></Myheader>
		<!-- 列表 -->
		<div class="follow-main">
			<div class="item" v-for="item in followList" :key="item.id">
				<p class="date">{{ item.create_date | formatTime }}</p>
				<!-- 被回复的评论(父评论)， 有父评论的时候渲染 -->
				<div class="parent" v-if="item.parent">
					<p class="parent_username">回复：{{ item.parent.user.nickname }}</p>
					<p class="parent_comment">{{ item.parent.content }}</p>
				</div>
				<p class="comment">{{ item.content }}</p>
				<p class="article">
					<router-link class="article_link" :to="`/articleDetail/?articleId=${item.id}`"> 原文：{{ item.post.title }} </router-link>
					<van-icon name="arrow" class="right" />
				</p>
			</div>
		</div>

		<!-- 空列表 -->
		<van-empty description="空空如也" v-if="followList.length === 0" />
	</div>
</template>

<script>
import Myheader from "@/components/Myheader.vue";
import {commentsListAPI} from "@/apis/user";
export default {
	data() {
		return {
			followList: [],
		};
	},
	components: {
		Myheader,
	},
	async created() {
		const res = await commentsListAPI();
		console.log(res.data.data);
		this.followList = res.data.data;
	},
};
</script>

<style lang="less" scoped>
.follow-main {
	.item {
		padding: 8px;
		border-bottom: 1px solid #ddd;
		p {
			margin: 8px 0;
		}
		.date {
			color: #999;
			font-size: 14px;
		}

		.comment {
			font-size: 16px;
			color: #333;
			font-weight: bold;
		}
		.parent {
			height: 80px;
			background-color: #e4e4e4;
			display: flex;
			flex-direction: column;
			justify-content: center;
			p {
				color: #9292a8;
			}
		}
		.article {
			display: flex;
			align-items: center;
			position: relative;
			.article_link {
				width: 90%;
				font-size: 16px;
				color: #666;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.right {
				position: absolute;
				right: 0;
				color: #666;
			}
		}
	}
}
</style>
